<template>
  <div>
    <div class="nav-bar flex">
      <router-link tag="div" :to="'goodsdetail?id='+this.$route.query.id">
        商品详情
      </router-link>
      <div class="active">用户评论</div>
    </div>
    <div class="nav-bar-before"></div>
    <xd-datalist url="api/getGoodCommentsList" ref="datalist" :autoload="false">
      <template slot-scope="scope">
        <div class="list-items">
          <div class="list-item border-b" v-for="(item,index) in scope.list" :key="index">
            <div class="flex">
              <div>
                <img :src="item.avatar|absUrl" alt="" class="avatar">
              </div>
              <div class="flex-con username">
                {{item.nickname}}
              </div>
            </div>
            <div class="time-str">
              {{item.createTime|parseTime}}
            </div>
            <div class="words">
              {{item.content}}
            </div>
          </div>
        </div>
      </template>
    </xd-datalist>

  </div>

</template>
<script>
export default {
  mounted() {
    let id = this.$route.query.id;
    this.$refs.datalist.addParam("goodsId", id).refresh();
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/nav";
.list-items {
  .list-item {
    padding: 0.48rem 0.4267rem 0.3867rem 0.4267rem;
    .avatar {
      width: 1.0667rem;
      height: 1.0667rem;
      border-radius: 50%;
      margin-right: 0.3467rem;
    }
    .username {
      color: #222;
      font-size: 0.4rem;
    }
    .time-str {
      color: #999999;
      font-size: 0.2933rem;
      padding-top: 0.2933rem;
      padding-bottom: 0.4267rem;
    }
    .words {
      font-size: 0.3467rem;
      line-height: 0.5067rem;
      color: #333333;
    }
  }
}
</style>
